<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="grid-content bg-purple">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span>在线人数</span>
            </div>
            <div class="head-vertical">
              <span style="color: #18cd69c7">{{ online }}</span>
              <el-divider direction="vertical"></el-divider>
              <svg-icon
                icon-class="todayonline"
                class-name="todayonline-class"
              />
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="grid-content bg-purple">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span>今日填报情况(未填报|已填报)人数</span>
            </div>
            <div class="head-vertical">
              <span style="color: red">{{ nofill }}</span>
              <el-divider direction="vertical"></el-divider>
              <span style="color: #5ed84d">{{ fill }}</span>
              <el-divider direction="vertical"></el-divider>
              <svg-icon icon-class="todayfill" class-name="todayfill-class" />
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="grid-content bg-purple">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span>今日审核情况(待审核|已审核|回退)数量</span>
            </div>
            <div class="head-vertical">
              <span style="color: #e6a700">{{ incheck }}</span>
              <el-divider direction="vertical"></el-divider>
              <span style="color: #13ce66">{{ check }}</span>
              <el-divider direction="vertical"></el-divider>
              <span style="color: red">{{ back }}</span>
              <el-divider direction="vertical"></el-divider>
              <svg-icon icon-class="todaycheck" class-name="todaycheck-class" />
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="grid-content bg-purple">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span>项目配置数量</span>
            </div>
            <div class="head-vertical">
              <span>{{ project }}</span>
              <el-divider direction="vertical"></el-divider>
              <svg-icon
                icon-class="todayproject"
                class-name="todayproject-class"
              />
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="home-crad-line">
      <el-col :xs="24" :sm="24" :md="18" :lg="18">
        <div class="grid-content bg-purple">
          <el-card shadow="always">
            <div slot="header">
              <span>多节点分布拓扑图</span>
            </div>
            <MuchNode />
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6">
        <div class="grid-content bg-purple">
          <el-card shadow="always">
            <div slot="header">
              <span>系统更新(最近10次迭代内容)</span>
            </div>
            <el-table
              height="450"
              stripe
              :data="systemUpdateContent"
              class="table-hualun"
            >
              <el-table-column label="迭代内容" align="center" prop="content" />
              <el-table-column
                label="迭代日期"
                align="center"
                prop="createTime"
              >
                <template slot-scope="scope">
                  <span>{{
                    parseTime(scope.row.createTime, '{y}-{m}-{d}')
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { init as boardData } from '@/api/work/home'
import { list as getOnline } from '@/api/monitor/online'
import MuchNode from '@/views/components/board/much_node.vue'

export default {
  name: 'Index',
  components: {
    MuchNode
  },
  data() {
    return {
      // 版本号
      version: '3.8.1',
      // 今日数量
      online: 133, // 在线数量
      fill: 121, // 提报数量
      nofill: 10, // 未提报人数
      incheck: 169, // 待审核数量
      check: 169, // 审核数量
      back: 0, // 回退数量
      project: 10, // 项目配置数量
      // 系统迭代内容
      systemUpdateContent: [],
      // 指定图表的配置项和数据
      dataArr: [],
      allArr: [],
      erArr: [],
      sanArr: []
    }
  },
  mounted() {
    this.getOnlineData()
    this.getBoardData()
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    /** 在线人数 */
    getOnlineData() {
      getOnline().then((response) => {
        this.online = response.total
      })
    },
    /** 所有数据 */
    getBoardData() {
      boardData().then((response) => {
        this.fill = response.data.fill
        this.nofill = response.data.nofill
        this.incheck = response.data.incheck
        this.check = response.data.check
        this.back = response.data.back
        this.systemUpdateContent = response.data.contents
        this.project = response.data.project
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.bg-purple {
  background: white;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.home-crad-line {
  margin-top: 20px;
}
.clearfix {
  text-align: center;
}
.head-vertical {
  line-height: 60px;
  font-size: 29px;
  text-align: center;
}
</style>
